<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<template>
  <div>
    <el-form :model="formValidate" :rules="ruleValidate" ref="formValidate" label-width="80px" class="demo-ruleForm">
        <el-form-item label="头像" prop="avatar">
          <el-upload
                  ref="upload"
                  class="avatar-uploader"
                  :action="fileUpload"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeAvatarUpload">
            <img v-if="imgUrl" :src="imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="formValidate.username" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formValidate.name" placeholder="请输入姓名" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formValidate.password" type="password" placeholder="请输入姓名" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="formValidate.phone" placeholder="请输入联系手机号" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="formValidate.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
            <el-radio :label="0">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" prop="role_id">
          <el-select :disabled="disableStatus" v-model="formValidate.role_id" placeholder="请选择">
            <el-option
                    v-for="item in roleList"
                    :value="item.id"
                    :key="item.id"
                    :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit('formValidate')">立即创建</el-button>
          <el-button @click="handreturn()">返回</el-button>
        </el-form-item>
        </el-form>
  </div>
</template>

<script>
import axios from "@/axios";
import {
  getmd5,
  guid,
  yzMobile,
  yzPwd,
  getHeaders,
  checkHttp
} from "@/assets/js/common";
export default {
  data() {
    return {
      loading:false,
      disableStatus: false,
      roleList: [],
      id: 0,
      imgUrl: "",
      //获取数据
      adminData: [],
      //提交数据
      formValidate: {
        username: "",
        name: "",
        phone: "",
        avatar: "",
        sex: "0",
        role_id: 0,
      },
      ruleValidate: {
        username: [
          {
            required: true,
            message: "账号不能为空！",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "姓名不能未空！",
            trigger: "blur"
          }
        ],
        role_id:[{
          type: 'number',
          required: true,
          message: "角色不能为空",
          trigger: "change"
        }]
      },

      //上传头像
      headers: {},
      credentials: true,
      fileUpload: ""
    };
  },
  mounted() {
    this.getAdmin();
    this.getRole();
    this.base = JSON.parse(sessionStorage.base);
    this.fileUpload = this.base.domain_name + "/api/file/upload";
    this.headers = getHeaders(localStorage._token);
      // 超级管理员不能修改角色
      this.disableStatus = this.$route.params.id === 1 ? true : false;
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //获取角色
    getRole() {
      let vm = this;
      axios
        .post("/admin/role/get-lists", {
          limit:100
        })
        .then(response => {
          let status = response.status;
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            vm.roleList = result.data;
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$message.info("网络或服务器异常");
        });
    },
    getAdmin() {
      let vm = this;
      axios
        .post("/admin/manage/edit", {
          admin_id: vm.$route.params.id
        })
        .then(response => {
          let status = response.status;
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            vm.formValidate = result;
            vm.imgUrl = result.file.path;
          } else {
            vm.$message.error(data.message);
          }
        })
        .catch(error => {
          // vm.$message.error("网络或服务器异常");
        });
      //
    },
    //提交数据
    handleSubmit(name) {
      let vm = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          vm.loading = true;
          axios
            .post("/admin/manage/store", vm.formValidate)
            .then(response => {
              let status = response.status;
              let data = response.data;
              if (data.code == 200) {
                vm.$message({
                  type: 'success',
                  message: "修改成功!",
                  onClose: function (msg) {
                    vm.$router.push({ name: "admin_list" });
                  }
                });
              } else {
                vm.loading = false;
                vm.$message.error(data.message);
              }
            })
            .catch(error => {
              // vm.$Message.error("网络或服务器异常");
            });
        } else {
          // vm.$Message.error("Fail!");
        }
      });
    },
    //返回上一页
    handreturn() {
      this.$router.go(-1);
    },
    handleSuccess(res, file) {
      if (res.code == 200) {
        this.imgUrl = res.img_path;
        this.formValidate.avatar = res.file;
      } else {
        vm.$message.error(res.message);
      }
    }
  }
};
</script>

